<template>
  <div class="card" style="line-height: 30px">
    <el-radio-group v-model="radio1" size="large">
      <el-radio-button label="模型部门" @click="Modelhandle" />
      <el-radio-button label="渲染部门" @click="Renderinghandle"/>
      <el-radio-button label="后期部门" @click="Posthandle" />
    </el-radio-group>
    <div>
      <div class="demo-progress">
        <el-progress :percentage="data.percentage" :stroke-width="15" striped />
        <el-row>
          <el-col :span="8"><el-statistic title="总的项目" :value="data.total_project" /></el-col>
          <el-col :span="6"><el-statistic title="已完成项目" :value="data.success_project" /></el-col>
          <el-col :span="6"><el-statistic title="未完成项目" :value="data.failed_project"></el-statistic></el-col>
        </el-row>
      </div>
        <el-table :data="data.tableData" style="width: 100%" @row-click="change">
          <el-table-column prop="employee_name" label="姓名" />
          <el-table-column prop="pos" label="职位" />
        </el-table>
      </div>
  </div>
</template>

<script setup>
import { handleError, reactive } from "vue";
import { Calendar, Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import {useStore} from 'vuex'
import router from "@/router"
import { ref } from 'vue';

const radio1 = ref('模型部门')

const store=useStore()

const data=reactive({
  department:1,
  percentage:0,
  total_project:0,
  success_project:0,
  failed_project:0,
  tableData:[],

})



const load=()=>{
  const formdata=new FormData()
  formdata.append('employee_department',data.department)
  axios.post('http://localhost:8088/GET/TeamWorkLoad',formdata).then(res=>{
    console.log(res)
    data.failed_project=res.data.data.DoingCounts
    data.success_project=res.data.data.DoneCounts
    data.total_project=data.failed_project+data.success_project
    data.percentage = parseFloat(((data.success_project / data.total_project) * 100).toFixed(1));
  })
  axios.post('http://localhost:8088/GET/DepartmentEmployeeList',formdata).then(res2=>{
    data.tableData=res2.data.data.DepartmentEmployeeList
    for(let i=0;i<data.tableData.length;i++){
      //通过状态值判断状态
      if(data.tableData[i].employee_position==1){
        data.tableData[i].pos="模型主管"
      }else if(data.tableData[i].employee_position==2){
        data.tableData[i].pos="渲染主管"
      }else if(data.tableData[i].employee_position==3){
        data.tableData[i].pos="后期主管"
      }else if(data.tableData[i].employee_position==4){
        data.tableData[i].pos="模型员工"
      }else if(data.tableData[i].employee_position==5){
        data.tableData[i].pos="渲染员工"
      }else if(data.tableData[i].employee_position==6){
        data.tableData[i].pos="后期员工"
      }
    }
  })
}
load()

const Modelhandle=()=>{
  data.department=1
  load()
}

const Renderinghandle=()=>{
  data.department=2
  load()
}

const Posthandle=()=>{
  data.department=3
  load()
}

const change=(row)=>{
  if(row.employee_position>=4&&row.employee_position<=6){
    console.log(row.employee_name)
    store.commit('update_jx',row.staff_id)
    store.commit('update_jx2',row.employee_name)
    router.push('/position')
  }
 
}

</script>